<template>
  <div class="showbeauty">
  <div class="bg1">
    <div class="maincon">
      <div class="largebanner">
        <div class="block">
          <el-carousel height="4.053rem">
            <el-carousel-item v-for="(slide,index) in slides" :key="index">
              <img :src="slide.src" alt="silde.title">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="secondarynav">
        <ul>
          <router-link to="showactivity" tag="li">精选文章</router-link>
          <router-link to="goodarticle" tag="li">活动推荐</router-link>
          <li>美日一签</li>
        </ul>
      </div>
      <div class="activetitle">
        <img src="../../../images/icon_zuireshangping_red.png" height="10" width="10" alt="">
        活动专题
        <img src="../../../images/icon_zuireshangping_red.png" height="10" width="10" alt="">
      </div>
      <div class="activecon clearfix" v-for="(item,index) in listdata" :key='index'>
        <div class="activecon-top clearfix">
          <router-link to="/userblog">
          <img :src="item.portrait" height="81" width="80">
          </router-link>
          <span>{{item.username}}</span>
          <button type="button" class="btn">关注ta</button>
        </div>
        <div class="activecon-con">
          <img :src="item.img">
        </div>
      </div>
    </div>
    <div class="bg"></div>
</div>
  </div>
</template>
<script>

  export default {
    name:'showbeauty',
    data(){
      return{
        invTime:3000,
        slides:[],
        listdata:[]
      }
    },
    components:{

    },
    created(){
      this.$http.get(this.$store.state.host+'/love/main/banner')
      .then(res=>{
        this.slides=res.data
      })
      this.$http.get(this.$store.state.host+'/love/showbeauty')
      .then(res=>{
        this.listdata= res.data.data
      })
    }
  }
</script>
<style lang="less" scoped>
  body{
    background-color:#fafafa;
    color:#808080;
  }
  .bg{
    height: 188/75rem;
    background: #ff406f;
  }
  .maincon{
    margin: 0 20/75rem;
    text-align: left;
    float: left;
    height: 100%;
  }
  .largebanner{
    height: 304/75rem;
    margin: 32/75rem 0;
    .block {
      img {
        width: 711/75rem;
        height: 304/75rem;
      }
      .el-carousel {
        height: 304/75rem;
        .el-carousel__container {
          height: 100%;
        }
      }
    }
  }
  li{
    float:left;
    margin:44/75rem 62/75rem 42/75rem 62/75rem; 
  }
  .secondarynav{
    font-size: 28/75rem;
    color:#333;
    height: 116/75rem;
    border-radius: 10/75rem;
    box-shadow: 2/75rem 2/75rem 9/75rem rgba(0,0,0,0.1);
    background: #fff;
  }
  .activetitle{
    text-align: center;
    font-size: 30/75rem;
    line-height: 94/75rem;
  }
  .activetitle img{
    margin:0 10/75rem;
  }
  .activecon{
    background-color: #fff;
    box-shadow: 2/75rem 2/75rem 9/75rem rgba(0,0,0,0.1);
    border-radius: 10/75rem;
    padding: 30/75rem 20/75rem 32/75rem 20/75rem;
    position: relative;
    margin-bottom: 40/75rem;
  }
  .activecon-top img{
    position:absolute;
    top:-22/75rem;
  }
  .activecon-top span{
    font-size: 28/75rem;
    margin-left: 112/75rem;
    float: left;
  }
  .activecon-top .btn{
    background-color: #fff;
    font-size: 18/75rem;
    border: 1px solid #808080;
    width: 93/75rem;
    height:32/75rem;
    line-height:30/75rem;
    border-radius:32/75rem;
    float: right;
    margin-right: 7/75rem;
  }
  .activecon-con{
    height: 352/75rem;
    margin-bottom: 38/75rem;
  }
  .activecon-con img{
    margin-top: 40/75rem;
    height: 352/75rem;
  }









  /* element轮播图样式 */
/*   .el-carousel{
  height:302/75rem;
  width:710/75rem;  
}
.el-carousel__container{
  height:302/75rem;
  width:710/75rem;  
}

.el-carousel__item{
  height:302/75rem;
  width:710/75rem;  
}
.el-carousel__item img {
  color: #475669;
  font-size: 14/75rem;
  line-height: 302/75rem;
  height:302/75rem;
  width:710/75rem;
  margin: 0;
}
.el-carousel__indicator{
	display: block;
	float:left;
} */
</style>
